<script setup lang="ts">
import {ref, type Ref} from 'vue';
const files: Ref<Array<string>> = ref([]);
const ondragenter = (e: DragEvent) => {
    e.preventDefault();
    if(e.dataTransfer){
        e.dataTransfer.dropEffect = 'copy';
    }
    // console.log('drag-enter', e);
};
const ondragleave = (e: DragEvent) => {
    e.preventDefault();
    // console.log('drag-leave', e);
};
const ondragover = (e: DragEvent) => {
    e.preventDefault();
    // console.log('drag-over', e);
};
const ondrop = (e: DragEvent) => {
    e.preventDefault();
    // console.log('drop', e);
    if(e.dataTransfer){
        Array.from(e.dataTransfer.files).forEach(file => {
            files.value.push(URL.createObjectURL(file));
        });
    }
};
</script>
<template>
	<div
		class="file-target"
		draggable="true"
		@dragenter="ondragenter"
		@dragover="ondragover"
		@dragleave="ondragleave"
		@drop="ondrop"
	/>
	<img
		v-for="(file, i) in files"
		:key="i"
		:src="file"
	> 
</template>
<style lang="scss">
    .file-target{
        width: 300px;
        height: 300px;
        border: 1px solid #39f;
    }
</style>